<!--
- File:    搜索商品页.
-->
<template>
  <div class="Web_Box">
    <div class="newlist"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <ul class="f-cb">
        <li class="f-cb" v-for="item in goodstList.data" @click="gotoGoodsDetail(item.store_id, item.goods_commonid)">
          <div class="mewimg2">
            <img style="width: 100%" :src="$config.imgsite + $config.goodsImgSrc + item.store_id + '/' + item.goods_image + '_w150'" alt="">
          </div>
          <div class="righttext fl" style="width:10rem; padding-top:0;  text-align: left"><p class=" slh f30">{{item.goods_name}}</p>
            <p class=" Prices2 tl pt20">￥{{item.goods_price | discount(item.groupbuy_rebate)}}<span class=" t-du">￥{{item.goods_marketprice}}</span>
            </p>
          </div>
        </li>
      </ul>
      <loading-more :allLoaded="goodstList.allLoaded" :show="goodstList.data.length > 0"></loading-more>
      <empty-data :show="goodstList.allLoaded && goodstList.data.length <= 0"></empty-data>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        keyword: this.$route.query.keyword,
        goodstList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getGoodsList(this.goodstList.page, this.goodstList.pageSize)
    },
    methods: {
      gotoGoodsDetail(storeId, id) {
        this.$router.push({name: 'goods-detail', params: {id: id}, query: {storeId: storeId}})
      },
      getGoodsList(page, pageSize) {
        this.goodstList.loading = true
        this.$request.getGoodsByClassify('', page, pageSize, this.keyword).then(data => {
          if (data.goods_list.length < this.goodstList.pageSize) {
            this.goodstList.allLoaded = true
          }
          this.goodstList.data = [...this.goodstList.data, ...data.goods_list]
        }).finally(() => {
          this.goodstList.requested = true
          this.goodstList.loading = false
        })
      },
      loadMore() {
        if (this.goodstList.loading || this.goodstList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getGoodsList(++this.goodstList.page, this.goodstList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>